import React, { Component } from 'react'
import './index.scss'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as mapActions from '../../actions/map'
class Block extends Component {
    blockList = {
        "block1": require('../../assets/imgs/block1.png'),
        "block2": require('../../assets/imgs/block2.png'),
        "block3": require("../../assets/imgs/block3.png"),
        "block4": require("../../assets/imgs/block4.png"),
        "block5": require("../../assets/imgs/block5.png"),
        "block6": require("../../assets/imgs/block6.png"),
        "block7": require("../../assets/imgs/block7.png"),
        "block8": require("../../assets/imgs/block8.png"),
        "block9": require("../../assets/imgs/block9.png")
    }
    state = {
        // 如果在创建block组件时再生成类型 难以进行后面消除砖块操作
        blockType: this.props.blockType,
        width: '68px',
        height: '34px'
    }
    ball = React.createRef()
    fps = 120
    componentDidMount() {
        this.insertBlockIntoMap()
    }
    insertBlockIntoMap() {
        // console.log(this.props)
        const type = this.props.blockType
        if (type === 0) return
        const row = this.props.row
        const col = this.props.col
        const x = this.ball.current.offsetLeft
        const y = this.ball.current.offsetTop
        const { insertBlock } = this.props.mapActions
        insertBlock([x, y, row, col, type])
    }
    componentDidUpdate(preProps) {
        // 利用回合数不同生成新的地图
        if (this.props.round !== preProps.round) {
            this.insertBlockIntoMap()
        }
    }
    componentWillUnmount() {
    }
    render() {
        const { width, height } = this.state
        const { row, col, vMap } = this.props
        const blockType = vMap[row][col]
        return (
            <div className="block" style={{
                width: width,
                height: height
            }}
                ref={this.ball}>
                {
                    blockType === 0 ? '' : <img src={this.blockList[`block${blockType}`]} alt="" />
                }
            </div>
        )
    }
}
const mapState = (state) => {
    return {
        vMap: state.vMap.vMap
    }
}
const mapAction = (dispatch) => {
    return {
        mapActions: bindActionCreators(mapActions, dispatch)
    }
}
export default connect(mapState, mapAction)(Block)